<template>
  <div class="neightbor">
    <div>
      <span style="font-size:26px;">{{ neighbor_name }}</span>
      <el-button v-if="button1" type="primary" style="float:right;" @click="updata">更新</el-button>
    </div>
    <quill-editor
      ref="myTextEditor"
      v-model="neighbor_content"
      :options="editorOption"
      style="height:600px;margin-top:20px;"
    />
    <!-- 确认执行 -->
    <el-dialog :visible.sync="submit" width="30%">
      <el-form ref="doForm" :rules="rules" :model="temp" label-position="left" label-width="70px">
        <span>确定执行此操作吗？</span>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="submit = false">取消</el-button>
        <el-button type="primary" @click="updataData">确定更新</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// import { quillEditor } from 'vue-quill-editor'
import request from '@/utils/request'
import { Message } from 'element-ui'
import { getAccount, getButtonpermsStr } from '@/utils/auth'
export default {
  data() {
    return {
      neighbor_content: '',
      neighbor_name: '',
      editorOption: {
        placeholder: '请输入内容'
      },
      submit: false,
      rules: {},
      temp: {},
      button1: false,
      buttonpermsStr: getButtonpermsStr()
    }
  },
  mounted() {
    if (this.buttonpermsStr !== undefined) {
      if (this.buttonpermsStr.indexOf(165) > -1) {
        this.button1 = true
      }
    }
    this.getDuide()
  },
  methods: {
    // 更新
    updata() {
      this.submit = true
    },
    // 确定更新
    updataData() {
      this.temp = {
        neighbor_content: this.neighbor_content,
        neighbor_name: this.neighbor_name,
        neighbor_id: 0
      }
      return request({
        url: '/v3/neighbor/update',
        method: 'post',
        headers: {
          account_type: getAccount()
        },
        data: this.temp
      }).then(res => {
        Message({
          message: '编辑成功',
          type: 'success',
          duration: 0.5 * 1000
        })
        this.submit = false
        this.$router.go(0) // 刷新页面
      })
    },
    // 可编辑
    onEditorChange({ editor, html, text }) {
      this.content = html
    },
    // 获取邻里公约
    getDuide() {
      return request({
        url: '/v3/neighbor/list',
        method: 'post',
        headers: {
          account_type: getAccount()
        },
        data: {
          community_id: 5,
          neighbor_id: 1
        }
      }).then(res => {
        this.neighbor_content = res.neighbor_content
        this.neighbor_name = res.neighbor_name
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.neightbor {
  margin-top: 55px;
  overflow: hidden;
  padding: 50px;
}
</style>
